<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <div class="config-container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="接入参数" name="accessParams">
            <access-params ref="accessParamsRef"/>
          </el-tab-pane>
          <el-tab-pane label="供应商通道" name="providerChannel">
            <provider-channel ref="providerChannelRef"/>
          </el-tab-pane>
          <el-tab-pane label="过滤策略" name="filterStrategy">
            <filter-strategy ref="filterStrategyRef"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="ruleRegulationConfigDialog">

import {ref, defineAsyncComponent, onMounted, nextTick} from 'vue'
import {useRoute} from 'vue-router'
import type {TabsPaneContext} from 'element-plus'

const route = useRoute()
const customerId = ref('')
const activeName = ref('accessParams')
// 获取路由参数
onMounted(() => {
  console.log("route", route);
  customerId.value = route.query.id as string || ''
  console.log('获取到路由参数 customerId:', customerId.value)

  nextTick(() => {
    console.log("nextTick", accessParamsRef.value);
    if (accessParamsRef.value) {//第一次
      (accessParamsRef.value as { initData: (id: string | number) => void }).initData(customerId.value)
    }
  })

})

// 导入接入参数配置组件
import AccessParams from './config/accessParams/index.vue'
const accessParamsRef = ref<InstanceType<typeof AccessParams>>()

// 导入供应商通道组件
import ProviderChannel from './config/providerChannel/index.vue'
const providerChannelRef = ref<InstanceType<typeof ProviderChannel>>()

// 导入过滤策略组件
import FilterStrategy from './config/filterStrategy/index.vue'
const filterStrategyRef = ref<InstanceType<typeof FilterStrategy>>()

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.paneName, event)
  if(tab.paneName === 'accessParams'){
    (accessParamsRef.value as { initData: (id: string | number) => void }).initData(customerId.value)
  }
  if(tab.paneName === 'providerChannel'){
    (providerChannelRef.value as { initData: (id: string | number) => void }).initData(customerId.value)
  }
  if(tab.paneName === 'filterStrategy'){
    (filterStrategyRef.value as { initData: (id: string | number) => void }).initData(customerId.value)
  }
}



</script>

<style scoped>
.config-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.demo-tabs {
  height: 100%;
  background: #fff;
}

/* 调整tabs头部样式 */
.demo-tabs :deep(.el-tabs__header) {
  margin: 0 0 15px 0;
  padding: 0 20px;
}

/* 调整内容区域 */
.demo-tabs :deep(.el-tabs__content) {
  padding: 15px 20px;
  height: calc(100% - 55px); /* 减去tabs头部高度 */
  overflow: auto;
  background: #fff;
  border-radius: 0 0 4px 4px;
}

/* 调整单个tab pane的内边距 */
.demo-tabs :deep(.el-tab-pane) {
  padding: 10px 0;
}
</style>
